$(document).ready(function() {
	
	$(".listAdd").live("click",function(){

		var elementID = $(this).attr("id");
			switch(elementID){
				case "stepAdd": 
				var count = parseInt($("#stepCount").val()) + 1;
				$('<li class="step'+ count +'"> <span class="userInput stepP"><input type="text" name="step[]" class="textFieldUser steps" data-count="' + count + '" /> <input type="text" name="time[]" class="time" /> <input type="button" class="removeItem stepRemove" data-num="step'+ count +'" value="Remove" /><span class="hide">Drag to Reorder</span><input type="file" name="stepImage[]" /> Max Image Size is 3MB.</span></li>').appendTo("#stepSort"); 
				$("#stepCount").val(count);
				break;
							
				case "ingredientAdd": 
				var count = parseInt($("#ingredientCount").val()) + 1;
				$('<li class="ingredient'+ count +'"> <span class="userInput"><input type="text" name="ingredient[]" class="textFieldUser" data-count="' + count + '" /> <input type="button" class="removeItem ingredientRemove" data-num="ingredient'+ count +'" value="Remove" /><span class="hide">Drag to Reorder</span><input type="file" name="ingredientImage[]" /> Max Image Size is 3MB.</span></li>').appendTo("#ingredientSort"); 
				$("#ingredientCount").val(count);
				break;
				
				case "materialAdd": 
				var count = parseInt($("#materialCount").val()) + 1;
				$('<li class="material'+ count +'"> <span class="userInput"><input type="text" name="material[]" class="textFieldUser" data-count="' + count + '" /> <input type="button" class="removeItem materialRemove" data-num="material'+ count +'" value="Remove" /><span class="hide">Drag to Reorder</span><input type="file" name="materialImage[]" /> Max Image Size is 3MB.</span></li>').appendTo("#materialSort"); 
				$("#materialCount").val(count);
				break;	
				
				default: break;
			}			
	});
	
	$(".removeItem").live("click",function(){
		//alert('here');
		if($(this).hasClass("stepRemove")){
			var liDelete = '.' + $(this).attr("data-num");
			$(liDelete).remove();
			return;
		}
		
		if($(this).hasClass("ingredientRemove")){
			var liDelete = '.' + $(this).attr("data-num");
			$(liDelete).remove();
			return;
		}
		
		if($(this).hasClass("materialRemove")){
			var liDelete = '.' + $(this).attr("data-num");
			$(liDelete).remove();
			return;
		}
	});
	
	$(".userInput").live("mouseover",function(){
		$(this).addClass('selectRow');
	});
	
	$(".userInput").live("mouseout",function(){
		$(this).removeClass('selectRow');
	});
	
	$(function(){
		$("#stepSort").sortable({
			stop: function(event, ui){
				generateSteps();
			}
		});
		$("#stepSort").disableSelection();
		
		$("#ingredientSort").sortable();
		$("#ingredientSort").disableSelection();
		
		$("#materialSort").sortable();
		$("#materialSort").disableSelection();
	});
	
});